<template>
  <div class="courseManage courseContentManage">
    <audio ref="Frequency" controls style="display: none;"></audio>
    <MaskItem :imgPercentage="mediaPercentage"></MaskItem>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-tickets"></i>
          {{courseCatalogTitle}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- <div class="container">
        <div class="handle-box">
          <el-button type="primary" @click.stop.prevent="operateAppend({}, 0)">新增阶段</el-button>
        </div>
        <div class="stageList" v-for="(item, index) in courseCatalogList" :key="index">
          <div class="stageListHeader">
            <div class="stageTitle">第 {{index+1}} 阶段</div>
            <div class="stageImg">
              <div class="crop-demo" @click.stop.prevent="operateCompile(item, index, 2)">
                <div class="cropImg" :style="{background: 'url(' + item.stage_cover + ')'}" v-if="item.stage_cover"></div>
              </div>
            </div>
            <div class="stageButton">
              <el-button type="primary" @click.stop.prevent="operateAppend(item, 1)">新增课程内容</el-button>
            </div>

          </div>

          <el-table :data="item.stage_list"   ref="multipleTable">
            <el-table-column label="课程序号" width="100" align="center">
              <template slot-scope="scope" >
                    {{item.stage_len + scope.$index+1}}
                </template>
            </el-table-column>
              <el-table-column label="第几天" align="center">
                <template slot-scope="scope" >
                    {{scope.row.section_day}} 天
                </template>
              </el-table-column>
              <el-table-column label="课程名" align="center">
                <template slot-scope="scope" >
                  {{scope.row.section_name}}
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                  <template slot-scope="scope" >
                    <el-button size="small" type="primary" @click.stop.prevent="operateCompile(scope.row, scope.$index, 3)">查看编辑</el-button>
                    <el-button size="small" type="danger" @click.stop.prevent="operateDelete(scope.row, 5)">删除</el-button>
                  </template>
              </el-table-column>
          </el-table>
        </div>

        <div class="pagination">
            <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next, jumper" :total="courseCatalogTotal">
            </el-pagination>
        </div>
    </div>-->

    <div class="container">
      <!-- 编辑弹出框 -->
      <!-- <el-dialog :title="editDialogTitle" :visible.sync="editVisible" width="60%" :close-on-click-modal="false"> -->
      <!-- 新增/编辑阶段 -->
      <!-- <div class="editStage" v-if="courseOperateStatus === 0 || courseOperateStatus === 2">
          <div class="editStageTitle">第 {{courseStageIndex}} 阶段</div>
          <div class="editStageContent">
            <div class="crop-demo">
              <img :src="courseStageImg" class="pre-img" v-if="courseStageImg">
              <div class="crop-demo-btn">选择图片
                  <input class="crop-input" type="file" name="image" ref="imageStage" accept="image/*" @change="uploadCourseImg($event, 0)"/>
              </div>
            </div>
          </div>
      </div>-->

      <!-- 课程内容编辑子窗体  -->
      <el-dialog
        :title="editSubDialogTitle"
        :visible.sync="editSubVisible"
        width="50%"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        @before-close="editSubVisible=false"
      >
        <!-- 课程 内容   0 - 文本   1 - 图片   2 - 音频   3 - 视屏  4 - 作业  5 - 游戏 -->
        <div class="subDialogCell" v-if="courseContentStatus === 0 || courseContentStatus === 4">
          <div style="width: 60%;" v-if="courseContentStatus === 0">
            <el-input type="text" placeholder="请输入标题" v-model="courseContentModules.name"></el-input>
          </div>
          <div v-if="courseContentStatus === 4">作业</div>
          <div style="height: 20px;"></div>
          <div class="taskImage" v-if="courseContentStatus === 4">
            <em>
              点击上传图片
              <input
                class="uploadBtn"
                type="file"
                name="image"
                multiple
                ref="imageTask"
                accept="image/*"
                @change="uploadCourseImg($event, 4)"
              />
            </em>
          </div>
          <!-- <div style="height: 20px;"></div> -->
          <div
            class="taskImageList"
            v-if="courseContentStatus === 4 && JSON.stringify(courseContentModules.image) !== '[]'"
          >
            <draggable v-model="courseContentModules.image" :options="dragOptions">
              <transition-group tag="div" id="done" class="item-ul">
                <div
                  class="taskImageCell"
                  v-for="(item, index) in courseContentModules.image"
                  :key="'task_'+index"
                  :style="{backgroundImage:`url(${item})`}"
                >
                  <div
                    class="cellButton"
                    @click.stop.prevent="delectTaskImage(courseContentModules.image, index)"
                  >
                    <el-button type="danger" icon="el-icon-delete" circle></el-button>
                  </div>
                </div>
              </transition-group>
            </draggable>
          </div>
          <div style="height: 20px;"></div>
          <el-input
            type="textarea"
            placeholder="请输入内容"
            :rows="8"
            v-model="courseContentModules.content"
          ></el-input>
        </div>
        <div class="subDialogCell" v-if="courseContentStatus === 1">
          <div style="width: 60%; margin-bottom: 30px;">
            <el-input type="text" placeholder="请输入标题" v-model="courseContentModules.name"></el-input>
          </div>
          <div class="uploadBox">
            <div class="uploadCell">
              <div class="uplaodImage" v-if="courseContentModules.content">
                <img :src="courseContentModules.content" width="100%" />
              </div>
              <i class="el-icon-upload cellIcon"></i>
              <div class="el-upload__text cellText cellImageText">
                <em>
                  点击上传图片
                  <input
                    class="uploadBtn"
                    type="file"
                    name="image"
                    ref="imageSection"
                    accept="image/*"
                    @change="uploadCourseImg($event, 1)"
                  />
                </em>
              </div>
            </div>
          </div>
          <div style="width: 60%; margin-top: 30px;">
            <el-input type="text" placeholder="请输入描述" v-model="courseContentModules.describe"></el-input>
          </div>
        </div>
        <!-- <div class="subDialogCell" v-if="courseContentStatus === 2">
            <div style="width: 60%; margin-bottom: 30px;">
              <el-input type="text" placeholder="请输入标题"  v-model="courseContentModules.name"></el-input>
            </div>
            <div class="uploadBox">
                <div class="uplaodAudio" v-if="courseContentModules.content" style="margin-bottom: 10px;">
                  <aplayer autoplay
                    :music="{
                      title: '悦器社',
                      artist: courseContentModules.name,
                      src: courseContentModules.content,
                      pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
                  }"/>
                </div>
                <div class="uploadCell">
                  <i class="el-icon-upload cellIcon"></i>
                  <div class="el-upload__text cellText cellAudioText">
                    <em>
                      点击上传音频
                      <input class="uploadBtn" type="file" name="audio" ref="audioSection" accept="audio/*" @change="uploadCourseImg($event, 2)"/>
                    </em>
                  </div>
                </div>
              </div>
        </div>-->
        <div class="subDialogCell" v-if="courseContentStatus === 3">
          <div style="width: 60%; margin-bottom: 30px;">
            <el-input type="text" placeholder="请输入标题" v-model="courseContentModules.name"></el-input>
          </div>
          <div class="uploadBox">
            <div
              class="uoloadVideo"
              v-if="courseContentModules.content"
              style="margin-bottom: 10px;"
            >
              <video :src="courseContentModules.content" width="100%" height="100%" controls></video>
            </div>
            <div class="uploadCell">
              <i class="el-icon-upload cellIcon"></i>
              <div class="el-upload__text cellText cellVideoText">
                <em>
                  点击上传视屏
                  <input
                    class="uploadBtn"
                    type="file"
                    name="video"
                    ref="videoSection"
                    accept="video/*"
                    @change="uploadCourseImg($event, 3)"
                  />
                </em>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="subDialogCell" v-if="courseContentStatus === 5">
            <el-row v-if="JSON.stringify(checkedLevel) !== '[]'">
              <div class="levelList">
                <draggable v-model="checkedLevel" :options="dragOptions">
                  <transition-group tag="div" id="done" class="item-ul">
                    <div class="levelcell" v-for="itemLevel in checkedLevel" :key="itemLevel.stripId">{{itemLevel.title}}</div>
                  </transition-group>
                </draggable>
              </div>
            </el-row>
            <div style="margin: 15px 0;"></div>
            <el-row>
              <el-button plain @click.stop.prevent="optionGameScreeningType(0)">预备章</el-button>
              <el-button type="primary" plain @click.stop.prevent="optionGameScreeningType(1)">主线</el-button>
              <el-button type="success" plain @click.stop.prevent="optionGameScreeningType(2)">左手</el-button>
              <el-button type="info" plain @click.stop.prevent="optionGameScreeningType(3)">乐理</el-button>
              <el-button type="warning" plain @click.stop.prevent="optionGameScreeningType(4)">右手</el-button>
            </el-row>
            <div style="margin: 15px 0;"></div>
            <el-row v-if="JSON.stringify(gameLevelList) !== '[]'">
              <div class="chapterList" v-for="(item, index) in gameLevelList[gameLevelType]" :key="index">
                <div class="chapterTitle" @click.stop.prevent="collapseLevelChange(item)">{{item.chapterTitle}}</div>
                <div class="noteList" v-for="(itemNote, indexNote) in item.noteList" :key="indexNote" v-show="item.showed">
                    <div class="noteTitle" @click.stop.prevent="collapseLevelChange(itemNote)">{{itemNote.noteTitle}}</div>
                    <div style="margin: 15px 0;"></div>
                    <div class="stripList" v-for="itemStrip in itemNote.noteStripList" :key="itemStrip.stripId" @change="handleCheckedLevelChange(itemStrip)" v-show="itemNote.showed">
                      <el-checkbox :label="itemStrip" :checked="itemStrip.checked" :disabled="itemStrip.disabled">{{itemStrip.title}} {{itemStrip.checked}}</el-checkbox>
                    </div>
                </div>
              </div>
            </el-row>
        </div>-->

        <span slot="footer" class="dialog-footer">
          <el-button @click="editSubVisible = false">取 消</el-button>
          <el-button type="primary" @click.stop.prevent="operateMedia">确定</el-button>
        </span>
      </el-dialog>

      <!-- 新增/编辑小节 -->
      <!-- <div class="editSection" v-if="courseOperateStatus === 1 || courseOperateStatus === 3"> -->
      <div class="editSection">
        <el-form
          ref="courseSectionFrom"
          :model="courseSectionFrom"
          :rules="courseSectionRules"
          label-width="25%"
        >
          <!-- <div class="sectionLine">
              <el-form-item label="课程名称" prop="sectionName">
                  <el-input v-model="courseSectionFrom.sectionName"></el-input>
              </el-form-item>
            </div>
            <div class="sectionLine">
              <el-form-item label="课程序号" prop="sectionNumber">
                  <el-input v-model.number="courseSectionFrom.sectionNumber"></el-input>
              </el-form-item>
            </div>
            <div class="sectionLine">
              <el-form-item label="第几天" prop="sectionDay">
                  <el-input v-model.number="courseSectionFrom.sectionDay"></el-input>
              </el-form-item>
            </div>
            <div class="sectionLine">
              <el-form-item label="是否布置作业">
                <el-radio v-model="courseSectionFrom.sectionJob" label="0">否</el-radio>
                <el-radio v-model="courseSectionFrom.sectionJob" label="1">是</el-radio>
              </el-form-item>
            </div>
            <div class="sectionLine">
              <el-form-item label="课程封面">
                <div v-if="courseSectionFrom.sectionCover">
                  <img class="showImage" :src="courseSectionFrom.sectionCover">
                </div>
                <div class="taskImage">
                  <em>
                    点击上传图片
                    <input class="uploadBtn" type="file" name="image" ref="imageCover" accept="image/*" @change="uploadCourseImg($event, 5)"/>
                  </em>
                </div>
              </el-form-item>
          </div>-->

          <draggable v-model="courseContentObject" :options="dragOptions">
            <transition-group tag="div" id="done" class="item-ul">
              <!-- 课程 内容   0 - 文本   1 - 图片   2 - 音频   3 - 视屏  4 - 作业  5 - 游戏 -->
              <el-form-item v-for="(item, index) in courseContentObject" :key="'#'+index">
                <div
                  class="setionCharacter setionCell"
                  v-if="item.status === 0 || item.status === 4"
                >
                  <P v-if="item.name">
                    {{item.name}}
                    <span style="color: #ee3a29">(标题)</span>
                  </P>
                  <!-- <el-input type="textarea" placeholder="请输入课程内容" :rows="8"></el-input> -->
                  <!-- <p>{{item.content}}</p> -->
                  <div
                    class="taskImageList"
                    v-if="item.status === 4 && JSON.stringify(item.image) !== '[]'"
                  >
                    <div
                      class="taskImageCell"
                      v-for="(itemTask, indexTask) in item.image"
                      :key="'task_'+indexTask"
                      :style="{backgroundImage:`url(${itemTask})`}"
                    ></div>
                  </div>
                  <p v-for="(itemText, indexText) in item.cache" :key="indexText">{{itemText}}</p>
                  <div class="cellBtn">
                    <el-button
                      type="primary"
                      icon="el-icon-edit"
                      circle
                      @click.stop.prevent="compileCourseContent(item, item.status)"
                    ></el-button>
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      @click.stop.prevent="deleteCourseContent(item, index, item.status)"
                    ></el-button>
                  </div>
                </div>

                <div class="setionImage setionCell" v-if="item.status === 1">
                  <p style="margin-bottom: 20px;">{{item.name}}</p>
                  <img :src="item.content" />
                  <p style="width: 100%;text-align: center;">{{item.describe}}</p>
                  <div class="cellBtn">
                    <el-button
                      type="primary"
                      icon="el-icon-edit"
                      circle
                      @click.stop.prevent="compileCourseContent(item, 1)"
                    ></el-button>
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      @click.stop.prevent="deleteCourseContent(item, index, 1)"
                    ></el-button>
                  </div>
                </div>

                <!-- <div class="setionAudio setionCell" v-if="item.status === 2">
                    <aplayer autoplay
                      :music="{
                        title: '悦器社~',
                        artist: item.name,
                        src: item.content,
                        pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
                    }"/>
                    <div class="cellBtn">
                      <el-button type="primary" icon="el-icon-edit" circle @click.stop.prevent="compileCourseContent(item, 2)"></el-button>
                      <el-button type="danger" icon="el-icon-delete" circle @click.stop.prevent="deleteCourseContent(item, index, 2)"></el-button>
                    </div>
                </div>-->

                <div class="setionVideo setionCell" v-if="item.status === 3">
                  <p style="margin-bottom: 20px;">{{item.name}}</p>
                  <!-- <div :id="'dplayer'+index" style="max-width: 70%;margin: 0 auto">{{videoPlayer('dplayer'+index, item.content)}}</div> -->
                  <div style="max-width: 70%;margin: 0 auto">
                    <video :src="item.content" width="100%" height="100%" controls></video>
                  </div>

                  <div class="cellBtn">
                    <el-button
                      type="primary"
                      icon="el-icon-edit"
                      circle
                      @click.stop.prevent="compileCourseContent(item, 3)"
                    ></el-button>
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      @click.stop.prevent="deleteCourseContent(item, index, 3)"
                    ></el-button>
                  </div>
                </div>

                <!-- <div class="setionGame setionCell" v-if="item.status === 5">
                    <div class="stripCell" v-for="(itemStrip, indexStrip) in item.cache" :key="itemStrip.stripId+'-'+indexStrip">{{itemStrip.title}}</div>
                    <div class="cellBtn">
                      <el-button type="primary" icon="el-icon-edit" circle @click.stop.prevent="compileCourseContent(item, 5)"></el-button>
                      <el-button type="danger" icon="el-icon-delete" circle @click.stop.prevent="deleteCourseContent(item, index, 5)"></el-button>
                    </div>
                </div>-->
              </el-form-item>
            </transition-group>
          </draggable>
        </el-form>

        <div class="setionButton">
          <div class="setionBtn" @click.stop.prevent="appendCourseContent(0)">
            <el-button type="primary">文字</el-button>
          </div>
          <div class="setionBtn" @click.stop.prevent="appendCourseContent(1)">
            <el-button type="danger">图片</el-button>
          </div>
          <!-- <div class="setionBtn" @click.stop.prevent="appendCourseContent(2)">
              <el-button type="info">音频</el-button>
          </div>-->
          <div class="setionBtn" @click.stop.prevent="appendCourseContent(3)">
            <el-button type="warning">视频</el-button>
          </div>
          <!-- <div class="setionBtn" @click.stop.prevent="appendCourseContent(4)">
              <el-button type="success">作业</el-button>
          </div>-->
          <!-- <div class="setionBtn" @click.stop.prevent="appendCourseContent(5)">
              <el-button type="danger">游戏</el-button>
          </div>-->
        </div>
      </div>

      <!-- <el-form ref="form" :model="courseSectionFrom" label-width="20%">
          <el-form-item label="课程类型名称">
              <el-input ></el-input>
          </el-form-item>
          <el-form-item label="总计天数">
              <el-input></el-input>
          </el-form-item>
          <el-form-item label="课程banner上传">
            <div class="crop-demo">
              <img :src="courseTypeBanner" class="pre-img" v-if="courseTypeBanner">
              <div class="crop-demo-btn">选择图片
                  <input class="crop-input" type="file" name="image" accept="image/*" @change="uploadCourseTypeImg($event, 0)"/>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="证书上传">
            <div class="crop-demo">
              <img :src="courseTypeCertificate" class="pre-img" v-if="courseTypeCertificate">
              <div class="crop-demo-btn">选择图片
                  <input class="crop-input" type="file" name="image" accept="image/*" @change="uploadCourseTypeImg($event, 1)"/>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="课程介绍图片上传">
            <div class="crop-demo">
              <img :src="courseTypeReferral" class="pre-img" v-if="courseTypeReferral">
              <div class="crop-demo-btn">选择图片
                  <input class="crop-input" type="file" name="image" accept="image/*" @change="uploadCourseTypeImg($event, 2)"/>
              </div>
            </div>
          </el-form-item>
      </el-form>-->
      <div style="text-align: right;">
        <el-button @click.stop.prevent="departureLesson">取 消</el-button>
        <el-button type="primary" @click.stop.prevent="operateForm('courseSectionFrom')">保存发布</el-button>
      </div>
      <!-- </el-dialog> -->
    </div>

    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt" v-if="courseOperateStatus == 4 || courseOperateStatus == 5">
        删除不可恢复，请输入登录密码确定删除
        <!-- <el-input ></el-input> -->
        <el-form ref="courseSectionFrom" :model="courseSectionFrom" :rules="courseSectionRules">
          <el-form-item label prop="userPassword">
            <el-input v-model="courseSectionFrom.userPassword" placeholder="请输入用户密码"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="del-dialog-cnt" v-else>确定删除？？？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click.stop.prevent="deleteForm('courseSectionFrom')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
// import { baiduCloud } from "@/config/env";
import { upLoadFileToOSS } from '@/config/utils'
import {
  // obtainCourseCatalogList,
  appendCourseStage,
  compileCourseStage,
  obtainCourseSection,
  appendCourseSection,
  compileCourseSection,
  deleteCourseSection,
  obtainGameScreeningList,
  compileCourseLesson
} from "@/config/api";
import Vue from "vue";
// 视频插件
// import 'DPlayer/dist/DPlayer.min.css'
// import DPlayer from 'DPlayer'
// 音频插件
import Aplayer from "vue-aplayer";
// 拖拽
import draggable from "vuedraggable";
// 加载动画
import Mask from "@/components/common/mask.vue";
export default {
  name: "CourseContentManage",
  components: {
    Aplayer,
    draggable,
    MaskItem: Mask
  },
  props: ["section_id"],
  data() {
    return {
    //   //
    //   akBos: baiduCloud.akBos,
    //   skBos: baiduCloud.skBos,
    //   endpointBos: baiduCloud.endpointBos,

    //   // 0 --- 课程阶段图片
    //   // bucketImgBos: baiduCloud.bucketBos +'/course/image',
    //   // urlImgBos: baiduCloud.urlBos+'/course/image/',
    //   bucketStageImageBos: baiduCloud.bucketBos + "/course/stage/image",
    //   urlStageImageBos: baiduCloud.urlBos + "/course/stage/image/",

    //   // 1 --- 课程内容图片
    //   bucketSetionImageBos: baiduCloud.bucketBos + "/course/setion/image",
    //   urlSetionImageBos: baiduCloud.urlBos + "/course/setion/image/",

    //   // 2 --- 课程内容音频
    //   bucketSetionAudioBos: baiduCloud.bucketBos + "/course/setion/audio",
    //   urlSetionAudioBos: baiduCloud.urlBos + "/course/setion/audio/",

    //   // 3 --- 课程内容视屏
    //   bucketSetionVideoBos: baiduCloud.bucketBos + "/course/setion/video",
    //   urlSetionVideoBos: baiduCloud.urlBos + "/course/setion/video/",

      // 多媒体 上传进度
      mediaPercentage: 0,

      // 拖拽配置
      dragOptions: {
        animation: 120,
        scroll: true,
        group: "sortlist",
        ghostClass: "ghost-style"
      },

      // // 存储课程类型数据
      // courseTypeList: [
      //   {},{},{}
      // ],

      // 存储课程目录(阶段+小节)数据
      courseCatalogData: [],
      // 存储课程目录数据
      courseCatalogList: [],
      // 课程目录标题
      courseCatalogTitle: "",
      // 课程目录总条数
      courseCatalogTotal: 0,
      // 课程目录页面
      courseCatalogPage: 0,

      // // 课程类型下标
      // courseTypeIndex: -1,

      // 课程内容表单
      courseSectionFrom: {
        sectionName: "",
        sectionNumber: null,
        sectionDay: null,
        sectionJob: "0",
        sectionCover: "",
        userPassword: ""
      },
      courseSectionRules: {
        sectionName: [
          { required: true, message: "请输入课程名称", trigger: "blur" }
        ],
        sectionNumber: [
          { required: true, message: "请填写课程序号", trigger: "blur" },
          { type: "number", message: "课程序号必须为数字" }
        ],
        sectionDay: [
          { required: true, message: "请填写第几天", trigger: "blur" },
          { type: "number", message: "第几天必须为数字" }
        ],
        userPassword: [
          { required: true, message: "请输入用户密码", trigger: "blur" }
        ]
      },
      // 显示编辑弹窗
      editVisible: true,
      // 编辑弹窗标题
      editDialogTitle: "",
      // 显示编辑子弹窗
      editSubVisible: false,
      // 编辑子弹窗标题
      editSubDialogTitle: "",

      // 显示删除弹窗
      delVisible: false,
      // 课程图片状态    0 --- 课程阶段图片   1 --- 课程内容图片  2 --- 课程内容音频  3 --- 课程内容视屏  4 --- 课程作业图片   5 --- 课程封面图片
      courseStatus: 0,
      // 课程阶段图片
      courseStageImg: "",
      // 课程阶段下标
      courseStageIndex: null,

      // // 课程封面图片
      // courseCoverImg: '',

      // // 课程新增对象
      // courseAppendObject: {},
      // // 课程新增状态 0 --- 新增阶段   1  --- 新增小节
      // courseAppendStatus: 0,
      // // 课程删除状态 0 --- 删除阶段   1  --- 删除小节
      // courseDeleteStatus: 0,

      // 课程操作状态  0---新增阶段 1---新增小节 2---编辑阶段 3---编辑小节 4---删除阶段 5---删除小节
      courseOperateStatus: 0,
      // 课程操作对象
      courseOperateObject: {},

      // 课程内容状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
      courseContentStatus: 0,
      // 课程内容对象
      courseContentObject: [],
      // 课程内容下标
      courseContentIndex: null,

      // 存储欲编辑课程内容模块
      courseContentModules: {},
      // 操作编辑课程内容模块状态  0 -- 新增  1 -- 编辑
      courseContentModulesStatus: 0,

      // 课程类型id
      typeId: "",
      // 课程阶段id
      stageId: "",
      // 课程小节id
      sectionId: "",

      // // 视屏播放器对象
      // dp: '',

      // 游戏关卡数据 列表
      gameLevelList: [],
      // 游戏关卡类型  0 -- 预备章  1 -- 主线  2 -- 左手  3 -- 乐理  4 -- 右手
      gameLevelType: 0,

      // checkAll: false,
      // isIndeterminate: true,

      // 储存 选中的关卡
      checkedLevel: [],
      // 作业 图片列表
      taskImageList: []

      // activeNames: ['13', '23']
    };
  },
  watch: {
    // 深度监听
    $route: {
      handler(item) {
        let self = this;
        if (JSON.stringify(item.query) != "[]") {
          // console.log(item.query.typeId, '...深度监听...typeId')
          // // 课程类型id
          // self.typeId = item.query.typeId;
          // // 课程阶段id
          // self.stageId = item.query.typeId+ '002';
          // // 获取课程目录数据
          // self.obtainCourseCatalogData()

          // 课程小节id
          self.sectionId = self.$route.query.sectionId;
          // 获取课程小节 小课堂数据
          self.obtainCourseLevelData();
        }
      },
      deep: true
    }
  },
  async mounted() {
    let self = this;
    // // 初始化百度云上传
    // self.initBaiDuBce();
    // console.log(self.$route.query, '......mounted')
    // if(JSON.stringify(self.$route.query) != '[]') {
    //   // console.log(self.$route.query.typeId, '...typeId')
    //   // // 课程类型id
    //   // self.typeId = self.$route.query.typeId;
    //   // // 课程阶段id
    //   // self.stageId = self.$route.query.typeId+ '002';
    //   // // 获取课程目录数据
    //   // self.obtainCourseCatalogData()

    //   // // 获取游戏关卡列表数据
    //   // await self.obtainGameScreeningData()
    //   // // 初始化游戏关卡列表数据
    //   // self.initGameScreeningData()

    //   // 课程小节id
    //   self.sectionId = self.$route.query.sectionId
    //   // 获取课程小节 小课堂数据
    //   self.obtainCourseLevelData()
    // }
    console.log(self.section_id, "......self.section_id");
    if (self.section_id) {
      // 课程小节id
      self.sectionId = self.section_id;
      // 获取课程小节 小课堂数据
      self.obtainCourseLevelData();
    }
  },
  methods: {
    videoPlayer(obj, url) {
      // this.$nextTick(() => {
      //     const dp = new DPlayer({
      //         container: document.getElementById(obj),
      //         video: {
      //             url: url
      //         }
      //     });
      // })
    },

    // // 分页导航
    // handleCurrentChange(val) {
    //   let self = this;
    //   // 课程目录页面
    //   self.courseCatalogPage = val - 1;
    //   // 获取课程目录数据
    //   self.obtainCourseCatalogData();
    //   console.log(val, '分页导航')
    // },

    // // 操作 添加类型
    // operateAppendType(){
    //   let self = this;
    //   // 编辑弹窗标题
    //   self.editDialogTitle = '新增课程类型';
    //   // 显示编辑弹窗
    //   self.editVisible = true;
    // },
    // // 操作 编辑类型
    // operateCompileType(item){
    //   let self = this;
    //   // 编辑弹窗标题
    //   self.editDialogTitle = '编辑课程类型';
    //   // 显示编辑弹窗
    //   self.editVisible = true;
    // },
    // // 操作 删除类型
    // operateDeleteType(index, row){
    //   let self = this;
    //   // 课程类型下标
    //   self.courseTypeIndex = index;
    //   console.log(index, row, '...删除类型')
    //   // 显示删除弹窗
    //   self.delVisible = true;
    // },

    // 操作初始化
    operateInit() {
      let self = this;
      // 课程操作对象
      self.courseOperateObject = {};
      // 课程操作状态  0---新增阶段 1---新增小节 2---编辑阶段 3---编辑小节 4---删除阶段 5---删除小节
      self.courseOperateStatus = 0;
      // 新增阶段
      self.courseStageImg = "";
      // 课程阶段下标
      self.courseStageIndex = null;
      // // 课程封面图片
      // self.courseCoverImg = '';
      // 课程内容表单
      self.courseSectionFrom.sectionName = "";
      self.courseSectionFrom.sectionNumber = null;
      self.courseSectionFrom.sectionDay = null;
      self.courseSectionFrom.sectionJob = "0";
      self.courseSectionFrom.userPassword = "";
      self.courseSectionFrom.sectionCover = "";

      // 课程内容状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
      self.courseContentStatus = 0;
      // 课程内容对象
      self.courseContentObject = [];
      // 课程内容下标
      self.courseContentIndex = null;
    },

    //  操作 添加
    operateAppend(item, status) {
      let self = this;
      // // 课程状态 0 --- 阶段   1  --- 小节
      // self.courseAppendStatus = status;
      // // 课程新增对象
      // self.courseAppendObject = item;
      // if(self.courseAppendStatus === 0){
      //   if(item){
      //     // 编辑弹窗标题
      //     self.editDialogTitle = '编辑课程阶段';
      //   }else{
      //     // 编辑弹窗标题
      //     self.editDialogTitle = '新增课程阶段';
      //   }
      // }
      // if(self.courseAppendStatus === 1){
      //   if(item){
      //     // 编辑弹窗标题
      //     self.editDialogTitle = '编辑课程内容';
      //   }else{
      //     // 编辑弹窗标题
      //     self.editDialogTitle = '新增课程内容';
      //   }
      // }

      // 操作初始化
      self.operateInit();
      // 课程操作对象
      self.courseOperateObject = item;
      // 课程操作状态  0---新增阶段 1---新增小节 2---编辑阶段 3---编辑小节 4---删除阶段 5---删除小节
      self.courseOperateStatus = status;
      if (self.courseOperateStatus === 0) {
        // 编辑弹窗标题
        self.editDialogTitle = "新增课程阶段";
        // 课程阶段下标
        self.courseStageIndex = self.courseCatalogList.length
          ? self.courseCatalogList.length + 1
          : 1;
      }
      if (self.courseOperateStatus === 1) {
        // 编辑弹窗标题
        self.editDialogTitle = "新增课程内容";
        // 课程阶段id
        self.stageId = item.stage_id;
      }

      // 显示编辑弹窗
      self.editVisible = true;
    },

    // // 操作 封面
    // operateCover() {
    //   let self = this;
    //   // 操作初始化
    //   self.operateInit();
    // },

    // 操作 编辑
    operateCompile(item, index, status) {
      let self = this;
      // 操作初始化
      self.operateInit();
      // 课程操作对象
      self.courseOperateObject = item;
      console.log(self.courseOperateObject, "......courseOperateObject");
      // 课程操作状态  0---新增阶段 1---新增小节 2---编辑阶段 3---编辑小节 4---删除阶段 5---删除小节
      self.courseOperateStatus = status;
      if (self.courseOperateStatus === 2) {
        // 编辑弹窗标题
        self.editDialogTitle = "编辑课程阶段";
        // 课程图片状态    0 --- 课程阶段图片   1 --- 课程内容图片  2 --- 课程内容音频  3 --- 课程内容视屏  4 --- 课程作业图片   5 --- 课程封面图片
        self.courseStatus = 0;
        // 课程阶段图片
        self.courseStageImg = self.courseOperateObject.stage_cover;
        // 课程阶段下标
        self.courseStageIndex = index + 1;
      }
      if (self.courseOperateStatus === 3) {
        // 编辑弹窗标题
        self.editDialogTitle = "编辑课程内容";
        // 课程内容表单
        self.courseSectionFrom.sectionName =
          self.courseOperateObject.section_name;
        self.courseSectionFrom.sectionNumber =
          self.courseOperateObject.section_number - 0;
        self.courseSectionFrom.sectionDay =
          self.courseOperateObject.section_day - 0;
        self.courseSectionFrom.sectionJob =
          self.courseOperateObject.section_job + "";
        self.courseSectionFrom.sectionCover =
          self.courseOperateObject.section_cover;
        // 课程内容对象
        self.courseContentObject = JSON.parse(
          self.courseOperateObject.section_content
        );
      }

      // 显示编辑弹窗
      self.editVisible = true;
    },

    // 操作 删除
    operateDelete(item, status) {
      let self = this;
      // // 课程删除状态 0 --- 删除阶段   1  --- 删除小节
      // self.courseDeleteStatus = status;
      // if(self.courseDeleteStatus === 0){}
      // if(self.courseDeleteStatus === 1){}
      // 操作初始化
      self.operateInit();
      // 课程操作对象
      self.courseOperateObject = item;
      // 课程操作状态  0---新增阶段 1---新增小节 2---编辑阶段 3---编辑小节 4---删除阶段 5---删除小节
      self.courseOperateStatus = status;
      if (self.courseOperateStatus === 4) {
      }
      if (self.courseOperateStatus === 5) {
      }

      // 显示删除弹窗
      self.delVisible = true;
    },

    // 新增课程内容
    async appendCourseContent(status) {
      let self = this;
      // 操作编辑课程内容模块状态  0 -- 新增  1 -- 编辑
      self.courseContentModulesStatus = 0;
      // 课程内容状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
      self.courseContentStatus = status;
      // 存储欲编辑课程内容模块
      self.courseContentModules = {
        status: self.courseContentStatus,
        content: "",
        cache: [],
        image: [],
        name: "",
        play: 0,
        duration: 0,
        describe: ""
      };
      if (self.courseContentStatus === 0) {
        // 编辑子弹窗标题
        self.editSubDialogTitle = "新增课程文本";
      }
      if (self.courseContentStatus === 1) {
        // 编辑子弹窗标题
        self.editSubDialogTitle = "新增课程图片";
      }
      if (self.courseContentStatus === 2) {
        // 编辑子弹窗标题
        self.editSubDialogTitle = "新增课程音频";
      }
      if (self.courseContentStatus === 3) {
        // 编辑子弹窗标题
        self.editSubDialogTitle = "新增课程视屏";
      }
      if (self.courseContentStatus === 4) {
        // 编辑子弹窗标题
        self.editSubDialogTitle = "新增课程作业";
        // 存储欲编辑课程内容模块
        self.courseContentModules.name = "作业";
      }
      if (self.courseContentStatus === 5) {
        // 编辑子弹窗标题
        self.editSubDialogTitle = "新增课程游戏";
        // 存储欲编辑课程内容模块
        // self.courseContentModules.name = '游戏'

        self.checkedLevel = [];
        self.gameLevelList = [];

        // 获取游戏关卡列表数据
        await self.obtainGameScreeningData();

        // 初始化游戏关卡列表数据
        self.initGameScreeningData();

        // 筛选可选择的游戏关卡列表数据
        self.filtrateGameScreeningData();
      }

      // 显示编辑子弹窗
      self.editSubVisible = true;
    },
    // 编辑课程内容
    async compileCourseContent(item, status) {
      let self = this;
      // 操作编辑课程内容模块状态  0 -- 新增  1 -- 编辑
      self.courseContentModulesStatus = 1;
      // 课程内容状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
      self.courseContentStatus = status;
      // 存储欲编辑课程内容模块
      self.courseContentModules = item;
      if (self.courseContentStatus === 0) {
        // 编辑子弹窗标题
        self.editSubDialogTitle = "编辑课程文本";
        // item.cache = item.content.join('\n')

        // item.content = contentToString
        console.log(item, ".....编辑课程内容");
      }
      if (self.courseContentStatus === 1) {
        // 编辑子弹窗标题
        self.editSubDialogTitle = "编辑课程图片";
      }
      if (self.courseContentStatus === 2) {
        // 编辑子弹窗标题
        self.editSubDialogTitle = "编辑课程音频";
      }
      if (self.courseContentStatus === 3) {
        // 编辑子弹窗标题
        self.editSubDialogTitle = "编辑课程视屏";
      }
      if (self.courseContentStatus === 4) {
        // 编辑子弹窗标题
        self.editSubDialogTitle = "编辑课程作业";
      }
      if (self.courseContentStatus === 5) {
        // 编辑子弹窗标题
        self.editSubDialogTitle = "编辑课程游戏";

        self.gameLevelList = [];

        // 获取游戏关卡列表数据
        await self.obtainGameScreeningData();

        // 初始化游戏关卡列表数据
        await self.initGameScreeningData();

        // 储存 选中的关卡
        self.checkedLevel = item.cache;

        // 课程内容对象
        console.log(self.courseContentObject, "课程内容对象");

        // 筛选可选择的游戏关卡列表数据
        self.filtrateGameScreeningData();

        console.log(self.courseContentModules, "编辑课程游戏");
      }

      // 显示编辑子弹窗
      self.editSubVisible = true;
    },
    // 拖拽课程内容
    // 删除课程内容
    deleteCourseContent(item, index, status) {
      let self = this;
      // 课程内容下标
      self.courseContentIndex = index;
      // console.log(item, index, status, '.......删除课程内容')
      // 显示删除弹窗
      self.delVisible = true;
    },
    // 删除作业图片
    delectTaskImage(item, index) {
      let self = this;
      item.splice(index, 1);
    },

    // // 初始化百度云上传
    // initBaiDuBce(){
    //   let self = this;
    //   let bosConfig = {
    //     credentials: {
    //         ak: self.akBos,
    //         sk: self.skBos
    //     },
    //     endpoint: self.endpointBos  // 根据您选用bos服务的区域配置相应的endpoint
    //   };
    //   // let bucket = self.bucketBos; // 设置您想要操作的bucket
    //   self.client = new baidubce.sdk.BosClient(bosConfig);
    // },
    // // 上传多媒体
    // uploadCourseMultimedia(file, index) {
    //   console.log(file, index, "上传多媒体");
    //   let self = this;
    //   // 用户取消上传
    //   if (file == undefined) {
    //     return;
    //   }
    //   // 生成6位随机数
    //   let chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
    //   let res = "";
    //   for (let i = 0; i < 6; i++) {
    //     let id = Math.ceil(Math.random() * 61);
    //     res += chars[id];
    //   }
    //   let key = res + "." + file.name.split(/\./g).pop(); // 保存到bos时的key，您可更改，默认以文件名作为key
    //   let blob = file;
    //   let ext = key.split(/\./g).pop();
    //   let mimeType = baidubce.sdk.MimeType.guess(ext);
    //   if (/^text\//.test(mimeType)) {
    //     mimeType += "; charset=UTF-8";
    //   }
    //   let options = {
    //     "Content-Type": mimeType
    //   };
    //   // 课程类型图片状态    0 --- 课程阶段图片  1 --- 课程内容图片  2 --- 课程内容音频  3 --- 课程内容视屏
    //   let bucketBos = "";
    //   let urlBos = "";
    //   let frequencyDuration = null;
    //   if (self.courseStatus === 0) {
    //     bucketBos = self.bucketStageImageBos;
    //     urlBos = self.urlStageImageBos;
    //   }
    //   if (self.courseStatus === 1 ||self.courseStatus === 4 ||self.courseStatus === 5) {
    //     bucketBos = self.bucketSetionImageBos;
    //     urlBos = self.urlSetionImageBos;
    //   }
    //   if (self.courseStatus === 2) {
    //     bucketBos = self.bucketSetionAudioBos;
    //     urlBos = self.urlSetionAudioBos;
    //   }
    //   if (self.courseStatus === 3) {
    //     bucketBos = self.bucketSetionVideoBos;
    //     urlBos = self.urlSetionVideoBos;
    //   }
    //   self.client.putObjectFromBlob(bucketBos, key, blob, options)
    //     .then(async res => {
    //       // 上传完成，添加您的代码
    //       console.log(key, res, file, index, "上传成功");
    //       // 课程图片状态    0 --- 课程阶段图片   1 --- 课程内容图片  2 --- 课程内容音频  3 --- 课程内容视屏  4 --- 课程作业图片   5 --- 课程封面图片
    //       if (self.courseStatus === 0 || self.courseStatus === 5) {
    //         if (self.courseStatus === 0) {
    //           // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
    //           self.$refs.imageStage.value = "";
    //           // 课程类型banner
    //           self.courseStageImg = urlBos + key;
    //         }
    //         if (self.courseStatus === 5) {
    //           // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
    //           self.$refs.imageCover.value = "";
    //           // 课程类型封面
    //           self.courseSectionFrom.sectionCover = urlBos + key;
    //           // self.courseStageImg = urlBos + key;
    //         }
    //       } else {
    //         console.log(file, index, "....file");
    //         // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
    //         if (self.courseStatus === 1) {
    //           self.$refs.imageSection.value = "";
    //         }
    //         if (self.courseStatus === 2) {
    //           self.$refs.audioSection.value = "";
    //           frequencyDuration = null;
    //           frequencyDuration = await self.obtainFrequencyDuration(
    //             urlBos + key
    //           );
    //           self.courseContentModules.duration = Math.floor(
    //             frequencyDuration
    //           );
    //         }
    //         if (self.courseStatus === 3) {
    //           self.$refs.videoSection.value = "";
    //         }

    //         if (self.courseStatus !== 4) {
    //           // self.courseContentModules.name = file.name.split(/\./g).shift();
    //           self.courseContentModules.content = urlBos + key;
    //           self.courseContentModules.play = 0;
    //         } else {
    //           self.$refs.imageTask.value = "";
    //           console.log("课程作业图片", urlBos + key);
    //           self.courseContentModules.image.push(urlBos + key);
    //         }

    //         console.log(self.courseContentModules, "...............");
    //       }
    //     })
    //     .catch(function(err) {
    //       // 上传失败，添加您的代码
    //       console.log(err);
    //     });
    //   self.client.on("progress", function(evt) {
    //     // console.log(evt, ".....")
    //     // 监听上传进度
    //     if (evt.lengthComputable) {
    //       self.mediaPercentage = parseInt((evt.loaded / evt.total) * 100) + "";
    //       console.log(self.mediaPercentage, "上传");
    //       self.mediaPercentage = String(self.mediaPercentage);
    //       // 满了，清空进度条
    //       if (self.mediaPercentage == 100) {
    //         self.mediaPercentage = 0;
    //       }
    //     }
    //   });
    // },

    // 上传图片
    async uploadCourseImg(event, status) {
        let self = this;
        // 课程图片状态    0 --- 课程阶段图片   1 --- 课程内容图片  2 --- 课程内容音频  3 --- 课程内容视屏  4 --- 课程作业图片   5 --- 课程封面图片
        self.courseStatus = status;
        // // 浏览器兼容 (FF不兼容event.srcElement)
        // let evt = event.srcElement ? event.srcElement : event.target;
        // // let file = evt.files[0]; // 获取要上传的文件
        // let file = evt.files; // 获取要上传的文件
        // for (let i = 0; i < file.length; i++) {
        //     // 上传多媒体
        //     self.uploadCourseMultimedia(file[i], i);
        // }
        // 浏览器兼容 (FF不兼容event.srcElement)
        let evt = event.srcElement ? event.srcElement : event.target;
        // 获取要上传的文件
        let file = evt.files;
        // 阿里oss上传路径
        let ossPath = '';
        if(self.courseStatus === 0){
            ossPath = 'wx_bs/course/stage/image'
        }
        if(self.courseStatus === 1 || self.courseStatus === 4 || self.courseStatus === 5){
            ossPath = 'wx_bs/course/setion/image'
        }
        if(self.courseStatus === 2){
            ossPath = 'wx_bs/course/setion/audio'
        }
        if(self.courseStatus === 3){
            ossPath = 'wx_bs/course/setion/video'
        }
        if (ossPath) {
            const loading = self.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            for (let i = 0; i < file.length; i++) {
                // 用户取消上传
                if(file[i] == undefined){
                    return;
                }
                // 上传多媒体
                const mainBannerUrl = await upLoadFileToOSS(file[i], ossPath)
                console.log(mainBannerUrl, '选择欲上传的多媒体文件')
                if(self.courseStatus === 0 || self.courseStatus === 5){
                    if(self.courseStatus === 0){
                        // // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
                        // self.$refs.imageStage.value = ''
                        // 课程类型banner
                        self.courseStageImg = mainBannerUrl;
                    }
                    if(self.courseStatus === 5){
                        // // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
                        // self.$refs.imageCover.value = ''
                        // 课程类型封面
                        self.courseSectionFrom.sectionCover = mainBannerUrl;
                    }
                }else{
                    // console.log(file, index,'....file')
                    // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
                    // if (self.courseStatus === 1) {
                    //     self.$refs.imageSection.value = ''
                    // }
                    if (self.courseStatus === 2) {
                        // self.$refs.audioSection.value = ''
                        frequencyDuration = null
                        frequencyDuration = await self.obtainFrequencyDuration((mainBannerUrl))
                        self.courseContentModules.duration = Math.floor(frequencyDuration);
                    }
                    // if (self.courseStatus === 3) {
                    //     self.$refs.videoSection.value = ''
                    // }
                    if (self.courseStatus !== 4) {
                        // self.courseContentModules.name = file.name.split(/\./g).shift();
                        self.courseContentModules.content = mainBannerUrl;
                        self.courseContentModules.play = 0;
                    } else {
                        // self.$refs.imageTask.value = ''
                        console.log('课程作业图片', mainBannerUrl)
                        self.courseContentModules.image.push(mainBannerUrl)
                    }
                    console.log(self.courseContentModules, '...............')
                }
                // console.log(i, file.length, '.............file.length - 1')
                if (i === file.length - 1) {
                    if (self.courseStatus === 0) {
                        self.$refs.imageStage.value = ''
                    }
                    if (self.courseStatus === 1) {
                        self.$refs.imageSection.value = ''
                    }
                    if (self.courseStatus === 2) {
                        self.$refs.audioSection.value = ''
                        frequencyDuration = null
                    }
                    if (self.courseStatus === 3) {
                        self.$refs.videoSection.value = ''
                    }
                    if (self.courseStatus === 4) {
                        self.$refs.imageTask.value = ''
                    }
                    if (self.courseStatus === 5) {
                        self.$refs.imageCover.value = ''
                    }
                    if (self.courseStatus === 6) {
                        self.$refs.imageShare.value = ''
                    }
                    loading.close()
                }
            }
        }
    },

    // 获取音频时长
    obtainFrequencyDuration(url) {
      let self = this;
      return new Promise((resolve, reject) => {
        // 获取 课程内容音频时长
        self.$refs.Frequency.src = url;
        self.$refs.Frequency.load();
        self.$refs.Frequency.oncanplay = () => {
          resolve(self.$refs.Frequency.duration);
          console.log(
            self.$refs.Frequency.duration,
            "self.$refs.Frequency.duration"
          );
        };
      });
    },

    // 离开小讲堂
    departureLesson() {
      let self = this;
      self.$emit("commentLesson");
    },

    // 保存分布
    async operateForm(formName) {
      let self = this;
      console.log(self.sectionId, self.courseContentObject, "...保存分布");
      if (JSON.stringify(self.courseContentObject) !== "[]") {
        const updateLesson = await compileCourseLesson(
          self.sectionId,
          JSON.stringify(self.courseContentObject)
        );
        if (updateLesson.status === 200) {
          self.$notify.success({
            title: "成功",
            message: "发布成功"
          });
        }
        console.log(updateLesson, ".........updateLesson");
        // 离开小讲堂
        self.departureLesson();
      } else {
        self.$notify.error({
          title: "错误",
          message: "内容不可为空"
        });
      }
      // // 课程操作状态  0---新增阶段 1---新增小节 2---编辑阶段 3---编辑小节 4---删除阶段 5---删除小节
      // if(self.courseOperateStatus === 0){
      //   if(!self.courseStageImg){
      //     self.$notify.error({
      //       title: '错误',
      //       message: '请上传阶段图片'
      //     });
      //     return;
      //   }
      //   appendCourseStage(self.typeId, self.courseStageImg)
      //     .then(res => {
      //       console.log(res, '... 新增阶段 res')
      //       if(res.status === 200){
      //         // 显示编辑弹窗
      //         self.editVisible = false
      //         // 获取课程目录数据
      //         self.obtainCourseCatalogData()
      //       }else{
      //         self.$notify.error({
      //           title: '错误',
      //           message: res.msg
      //         });
      //       }
      //   }).catch(res => {
      //       console.log(res, '... 新增阶段 err')
      //   });
      // }

      // if(self.courseOperateStatus === 1){
      //   self.$refs[formName].validate((valid) => {
      //     if (valid) {
      //       console.log(self.courseContentObject, '...courseContentObject')
      //       let textFlag = false;
      //       let mediaFlag = false;
      //       self.courseContentObject.forEach(function(item, index){
      //         if(item.status === 0){
      //           textFlag = true;
      //         }
      //         if(item.status === 1 || item.status === 2 || item.status === 3){
      //           mediaFlag = true;
      //         }
      //       })
      //       console.log(textFlag&&mediaFlag, '.......textFlag&&mediaFlag')
      //       // 课程文本 && (课程 图片 || 视屏 || 音频)
      //       // if(textFlag&&mediaFlag){
      //       if(textFlag){
      //         // courseSectionFrom: {
      //         //   sectionName: '',
      //         //   sectionNumber: null,
      //         //   sectionDay: '',
      //         // },

      //         appendCourseSection(self.stageId, self.typeId, self.courseSectionFrom.sectionNumber, (self.courseSectionFrom.sectionDay+''), self.courseSectionFrom.sectionName, (self.courseSectionFrom.sectionJob+''), self.courseSectionFrom.sectionCover, JSON.stringify(self.courseContentObject))
      //           .then(res => {
      //             console.log(res, '... 新增小节 res')
      //             if(res.status === 200){
      //               // 显示编辑弹窗
      //               self.editVisible = false
      //               // 获取课程目录数据
      //               self.obtainCourseCatalogData()
      //             }else{
      //               self.$notify.error({
      //                 title: '错误',
      //                 message: res.msg
      //               });
      //             }
      //         }).catch(res => {
      //             console.log(res, '... 新增小节 err')
      //         });
      //       }else{
      //         self.$notify.error({
      //           title: '错误',
      //           message: '课程内容不能为空...'
      //         });
      //       }
      //     } else {
      //       console.log('表单提交失败!!');
      //       return false;
      //     }
      //   });
      // }

      // if(self.courseOperateStatus === 2){
      //   compileCourseStage(self.courseOperateObject.stage_id, self.courseOperateObject.stage_number, self.courseOperateObject.type_id, self.courseStageImg)
      //     .then(res => {
      //       console.log(res, '... 编辑阶段 res')
      //       if(res.status === 200){
      //         // 显示编辑弹窗
      //         self.editVisible = false
      //         // 获取课程目录数据
      //         self.obtainCourseCatalogData()
      //       }else{
      //         self.$notify.error({
      //           title: '错误',
      //           message: res.msg
      //         });
      //       }
      //   }).catch(res => {
      //       console.log(res, '... 编辑阶段 err')
      //   });
      // }

      // if(self.courseOperateStatus === 3){
      //   self.$refs[formName].validate((valid) => {
      //     if (valid) {
      //       console.log(self.courseContentObject, '...courseContentObject')
      //       let textFlag = false;
      //       let mediaFlag = false;
      //       self.courseContentObject.forEach(function(item, index){
      //         if(item.status === 0){
      //           textFlag = true;
      //         }
      //         if(item.status === 1 || item.status === 2 || item.status === 3){
      //           mediaFlag = true;
      //         }
      //       })
      //       console.log(textFlag&&mediaFlag, '.......textFlag&&mediaFlag')
      //       // 课程文本 && (课程 图片 || 视屏 || 音频)
      //       // if(textFlag&&mediaFlag){
      //       if(textFlag){
      //         // section_id,
      //         // stage_id,
      //         // type_id,
      //         // section_number,
      //         // section_day,
      //         // section_name,
      //         // section_content

      //         compileCourseSection(self.courseOperateObject.section_id, self.courseOperateObject.stage_id, self.courseOperateObject.type_id, self.courseSectionFrom.sectionNumber, (self.courseSectionFrom.sectionDay+''), self.courseSectionFrom.sectionName, (self.courseSectionFrom.sectionJob+''), self.courseSectionFrom.sectionCover, JSON.stringify(self.courseContentObject))
      //           .then(res => {
      //             console.log(res, '... 编辑小节 res')
      //             if(res.status === 200){
      //               // 显示编辑弹窗
      //               self.editVisible = false
      //               // 获取课程目录数据
      //               self.obtainCourseCatalogData()
      //             }else{
      //               self.$notify.error({
      //                 title: '错误',
      //                 message: res.msg
      //               });
      //             }
      //         }).catch(res => {
      //             console.log(res, '... 编辑小节 err')
      //         });
      //       }else{
      //         self.$notify.error({
      //           title: '错误',
      //           message: '课程内容不能为空...'
      //         });
      //       }
      //     } else {
      //       console.log('表单提交失败!!');
      //       return false;
      //     }
      //   });
      // }
    },

    // 确定删除
    async deleteForm(formName) {
      let self = this;
      // 课程操作状态  0---新增阶段 1---新增小节 2---编辑阶段 3---编辑小节 4---删除阶段 5---删除小节  其他---删除内容
      if (self.courseOperateStatus === 4) {
        // deleteCourseSection
        self.$refs[formName].validate(valid => {
          if (valid) {
          }
        });
      } else if (self.courseOperateStatus === 5) {
        self.$refs[formName].validate(valid => {
          if (valid) {
            console.log(self.courseSectionFrom.userPassword);
            deleteCourseSection(
              self.courseOperateObject.section_id,
              self.courseSectionFrom.userPassword
            )
              .then(res => {
                console.log(res, "... 删除 res");
                if (res.status === 200) {
                  // 课程目录页面
                  self.courseCatalogPage = 0;
                  // // 获取课程目录数据
                  // self.obtainCourseCatalogData()
                  // 显示删除弹窗
                  self.delVisible = false;
                } else {
                  self.$notify.error({
                    title: "错误",
                    message: res.msg
                  });
                }
              })
              .catch(res => {
                console.log(res, "... 删除 err");
              });
          }
        });
      } else {
        // 课程内容对象 courseContentObject
        // 课程内容下标 courseContentIndex
        self.courseContentObject.splice(self.courseContentIndex, 1);
        // 显示删除弹窗
        self.delVisible = false;
      }
    },

    // 初始化 多媒体
    initMedia() {
      let self = this;
    },

    // 检测 多媒体
    monitorMedia() {
      let self = this;
      if (!self.courseContentModules.content) {
        // 课程内容状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
        // courseContentStatus: 0,
        // console.log(self.courseContentStatus, '...课程内容状态')
        if (self.courseContentStatus === 0) {
          self.$notify.error({
            title: "错误",
            message: "请填写课程文本"
          });
        }
        if (self.courseContentStatus === 1) {
          self.$notify.error({
            title: "错误",
            message: "请上传课程图片"
          });
        }
        if (self.courseContentStatus === 2) {
          self.$notify.error({
            title: "错误",
            message: "请上传课程音频"
          });
        }
        if (self.courseContentStatus === 3) {
          self.$notify.error({
            title: "错误",
            message: "请上传课程视屏"
          });
        }
        if (self.courseContentStatus === 4) {
          self.$notify.error({
            title: "错误",
            message: "请填写课程作业"
          });
        }
        if (self.courseContentStatus === 5) {
          self.$notify.error({
            title: "错误",
            message: "请选择课程游戏"
          });
        }
        return false;
      } else {
        return true;
      }
    },

    // 确定编辑 多媒体
    operateMedia() {
      let self = this;
      // 课程内容状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
      // courseContentStatus: 0,
      // // 课程内容对象
      // courseContentObject: [],

      // 检测 多媒体
      if (self.monitorMedia()) {
        // // 存储欲编辑课程内容模块
        // courseContentModules: {},
        // 操作编辑课程内容模块状态  0 -- 新增  1 -- 编辑
        // courseContentModulesStatus: 0,

        if (self.courseContentStatus === 0 || self.courseContentStatus === 4) {
          // let contentText = self.courseContentModules.content.split('\n')
          // self.courseContentModules.content = []
          // self.courseContentModules.content = contentText

          self.courseContentModules.cache = self.courseContentModules.content.split(
            "\n"
          );

          console.log(
            self.courseContentModules,
            "........courseContentModules"
          );
        }

        if (self.courseContentModulesStatus === 0) {
          // 课程内容对象
          self.courseContentObject.push(self.courseContentModules);
        }
        if (self.courseContentModulesStatus === 1) {
          if (self.courseContentStatus === 5) {
            console.log(
              self.courseContentModules,
              "........courseContentModules"
            );
            console.log(self.checkedLevel, "........checkedLevel");
            if (JSON.stringify(self.checkedLevel) !== "[]") {
              self.courseContentModules.cache = self.checkedLevel;
              // self.courseContentModules.content = self.checkedLevel
              // 储存 选中的关卡id
              const levelId = [];
              // 储存 选中的关卡
              self.checkedLevel.some((itemLevel, indexLevel) => {
                levelId.push(itemLevel.stripId);
              });
              self.courseContentModules.content = levelId.join();
            }
          }
        }

        // 显示编辑子弹窗
        self.editSubVisible = false;
      }
    },

    // 获取课程小节 小课堂数据
    async obtainCourseLevelData() {
      let self = this;
      // 课程内容对象
      self.courseContentObject = [];
      let courseSectionInfo = await obtainCourseSection(self.sectionId);
      console.log(self.sectionId, courseSectionInfo, "获取课程小节 小课堂数据");
      if (courseSectionInfo.status === 200) {
        const courseSectionData = courseSectionInfo.data;
        // 课程目录标题
        self.courseCatalogTitle = `DAY ${courseSectionData.section_day} ${courseSectionData.section_name}`;
        if (courseSectionData.section_lesson) {
          console.log(courseSectionData.section_lesson, "section_lesson");
          self.courseContentObject = JSON.parse(
            courseSectionData.section_lesson
          );
        }
        console.log(self.courseContentObject, "课程内容对象");
      }
    },

    // // 获取课程目录数据
    // async obtainCourseCatalogData(){
    //   let self = this;
    //   let courseCatalogData = await obtainCourseCatalogList(self.typeId, self.courseCatalogPage);
    //   if(JSON.stringify(courseCatalogData) != '{}' && courseCatalogData){
    //     // 存储课程目录数据
    //     self.courseCatalogList = courseCatalogData.list;
    //     // 课程目录标题
    //     self.courseCatalogTitle = courseCatalogData.title;
    //     // 课程目录总条数
    //     self.courseCatalogTotal = courseCatalogData.total;
    //   }
    //   console.log(courseCatalogData, '....获取课程分类数据')
    // },

    // 选择游戏关卡类型
    optionGameScreeningType(status) {
      let self = this;
      // 游戏关卡类型  0 -- 预备章  1 -- 主线  2 -- 左手  3 -- 乐理  4 -- 右手
      self.gameLevelType = status;
      // // 游戏关卡数据 列表
      // self.gameLevelList = []
      // // 获取游戏关卡列表数据
      // self.obtainGameScreeningData()
      console.log(self.gameLevelList[self.gameLevelType], "选择游戏关卡类型");
    },

    // handleCheckAllChange(item) {
    //   let self = this;
    //   console.log(item, 'handleCheckAllChange')
    //   // self.checkedLevel = val ? self.gameLevelList : [];
    //   // self.isIndeterminate = false;
    // },
    handleCheckedLevelChange(item) {
      let self = this;
      console.log(item, "handleCheckedLevelChange");
      Vue.set(item, "checked", !item.checked);
      // 储存 选中的关卡id
      console.log(self.checkedLevel, item, "储存 选中的关卡 checkedLevel");
      if (item.checked) {
        self.checkedLevel.push(item);
      } else {
        if (JSON.stringify(self.checkedLevel) !== "[]") {
          self.checkedLevel.some((itemLevel, indexLevel) => {
            if (itemLevel.stripId === item.stripId) {
              self.checkedLevel.splice(indexLevel, 1);
            }
          });
        }
      }

      // 存储欲编辑课程内容模块
      self.courseContentModules.cache = self.checkedLevel;
      // 储存 选中的关卡id
      const levelId = [];
      // 储存 选中的关卡
      self.checkedLevel.some((itemLevel, indexLevel) => {
        levelId.push(itemLevel.stripId);
      });
      self.courseContentModules.content = levelId.join();
      console.log(self.courseContentModules, "存储欲编辑课程内容模块");
    },

    // 折叠关卡的变化
    collapseLevelChange(item) {
      let self = this;
      Vue.set(item, "showed", !item.showed);
    },

    // 获取游戏关卡列表数据
    async obtainGameScreeningData() {
      let self = this;
      const loading = self.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let gameLevelData = await obtainGameScreeningList(self.gameLevelType);
      if (JSON.stringify(gameLevelData) != "{}" && gameLevelData) {
        // 游戏关卡数据 列表
        self.gameLevelList = [];
        if (gameLevelData.status === 200) {
          // 游戏关卡数据 列表
          self.gameLevelList = gameLevelData.data;
          if (JSON.stringify(self.gameLevelList) !== "[]") {
            console.log(self.checkedLevel, "获取游戏关卡列表数据 checkedLevel");
          }
        }
      }
      console.log(gameLevelData, "....获取游戏关卡列表数据");
      loading.close();
    },

    // 初始化游戏关卡列表数据
    initGameScreeningData() {
      let self = this;
      if (JSON.stringify(self.gameLevelList) !== "[]") {
        // 游戏关卡数据 列表
        self.gameLevelList.some((itemGame, indexGame) => {
          itemGame.some((itemChapter, indexChapter) => {
            Vue.set(itemChapter, "showed", false);
            itemChapter.noteList.some((itemNote, indexNote) => {
              Vue.set(itemNote, "showed", false);
              itemNote.noteStripList.some((itemStrip, indexStrip) => {
                Vue.set(itemStrip, "checked", false);
                Vue.set(itemStrip, "disabled", false);
              });
            });
          });
        });
      }
    },
    // 筛选可选择的游戏关卡列表数据
    filtrateGameScreeningData() {
      let self = this;
      //  将 游戏关卡数据列表中   所对应的课程内容对象 置为不可选
      if (JSON.stringify(self.gameLevelList) !== "[]") {
        // 游戏关卡数据 列表
        self.gameLevelList.some((itemGame, indexGame) => {
          itemGame.some((itemChapter, indexChapter) => {
            itemChapter.noteList.some((itemNote, indexNote) => {
              itemNote.noteStripList.some((itemStrip, indexStrip) => {
                if (JSON.stringify(self.courseContentObject) !== "[]") {
                  self.courseContentObject.some((itemContent, indexObject) => {
                    // 课程内容状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
                    if (itemContent.status === 5) {
                      itemContent.cache.some((itemCache, indexCache) => {
                        if (itemCache.stripId === itemStrip.stripId) {
                          Vue.set(itemStrip, "disabled", true);
                        }
                      });
                    }
                  });
                }
              });
            });
          });
        });
      }

      // 若存在 checkedLevel 则此次操作为编辑   反正为新增
      // 编辑时 筛选出 游戏关卡数据列表中   所对应的课程内容对象 置为 选中 可选 状态
      if (
        JSON.stringify(self.gameLevelList) !== "[]" &&
        JSON.stringify(self.checkedLevel) !== "[]"
      ) {
        self.checkedLevel.some((itemLevel, indexLevel) => {
          // 游戏关卡数据 列表
          self.gameLevelList.some((itemGame, indexGame) => {
            itemGame.some((itemChapter, indexChapter) => {
              itemChapter.noteList.some((itemNote, indexNote) => {
                itemNote.noteStripList.some((itemStrip, indexStrip) => {
                  if (
                    itemLevel.stripId === itemStrip.stripId &&
                    itemLevel.title === itemStrip.title
                  ) {
                    console.log(
                      itemStrip,
                      indexStrip,
                      "..........itemStrip, indexStrip"
                    );
                    Vue.set(itemChapter, "showed", true);
                    Vue.set(itemNote, "showed", true);
                    Vue.set(itemStrip, "checked", true);
                    Vue.set(itemStrip, "disabled", false);
                  }
                });
              });
            });
          });
        });
      }
    }
  }
};
</script>

<style>
.courseContentManage .v-modal {
  display: none;
}
</style>
<style scoped>
.handle-box {
  margin-bottom: 20px;
  width: 100%;
  text-align: right;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}

.pre-img {
  width: 300px;
  height: auto;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 5px;
}
.crop-demo {
  display: flex;
  align-items: flex-end;
}
.crop-demo-btn {
  position: relative;
  width: 100px;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  margin-left: 30px;
  background-color: #409eff;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  box-sizing: border-box;
}
.crop-input {
  position: absolute;
  width: 100px;
  height: 40px;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
</style>
<style lang="less" scoped>
@import "CourseLessonManage.less";
</style>
